var win;
Ext.define('sysGroupUser', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        useNull: true
    }, 'GroupID', 'UserID', 'GroupName']//,

});
Ext.define('sysGroupUser2', {
    extend: 'Ext.data.Model',
    fields: ['id', 'GroupID', 'UserID', 'GroupName']//,

});

function showGroupForm(id) {
    if (!id) return;
    //dragdrop
    // create the data store
    var progProxy =Ext.create('Ext.data.proxy.Ajax',{
        api: {
                read: 'sysgroupuserAjax.aspx?action=read',
                create: 'sysgroupuserAjax.aspx?action=create',
                update: 'sysgroupuserAjax.aspx?action=update',
                destroy: 'sysgroupuserAjax.aspx?action=delete'
            },
            reader: {
                type: 'json',
                root: 'data'
            },
            
            writer: {
                type: 'json',
                root: 'data'
                    }
           
            
    });
    var firstGridStore = Ext.create('Ext.data.Store', {
        //autoLoad: true,
        //autoSync: true,
        model: 'sysGroupUser',
        proxy:progProxy
        });


    // Column Model shortcut array
    var columns = [
        { text: "组", flex: 1, sortable: true, dataIndex: 'GroupName' }
    ];

    // declare the source Grid
    var firstGrid = Ext.create('Ext.grid.Panel', {
        multiSelect: true,
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'firstGridDDGroup',
                dropGroup: 'secondGridDDGroup'
            },
            listeners: {
                drop: function(node, data, dropRec, dropPosition) {
                    //var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                    //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
            },
            'itemdblclick': function(view, record, item, index, e) {
                firstGridStore.remove(record);
                var ipost = secondGridStore.getRange().length;
                secondGridStore.insert(ipost, record);
            }   
            }
        },
        store: firstGridStore,
        columns: columns,
        stripeRows: true,
        title: '已选组',
        margins: '0 2 0 0'
    });

    var secondGridStore = Ext.create('Ext.data.Store', {
        autoSync: true,
        model: 'sysGroupUser2',
        proxy: {
            type: 'ajax',
            api: {
            read: 'sysprogTreeAjax.aspx?action=userid',
            create: 'sysprogTreeAjax.aspx?action=create',
            update: 'sysprogTreeAjax.aspx?action=update',
            destroy: 'sysprogTreeAjax.aspx?action=delete'
            },
            reader: {
                type: 'json',
                root: 'data'
            },
              writer: {
                type: 'json',
                root: 'data'
                    }
        }
    });

    // create the destination Grid
    var secondGrid = Ext.create('Ext.grid.Panel', {
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'secondGridDDGroup',
                dropGroup: 'firstGridDDGroup'
            },
            listeners: {
                drop: function(node, data, dropRec, dropPosition) {
                    //var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                    //Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
            },
            'itemdblclick': function(view, record, item, index, e) {
                secondGridStore.remove(record);
                var ipost = firstGridStore.getRange().length;

                firstGridStore.add({ id:'', GroupID: record.data.GroupID, UserID:id, GroupName: record.data.GroupName });
                //firstGridStore.insert(ipost,record); 
            }
            }
        },
        store: secondGridStore,
        columns: columns,
        stripeRows: true,
        title: '全部组',
        margins: '0 0 0 3'
    });
    var displayPanel = Ext.create('Ext.Panel', {
        width: 600,
        //height: 400,
        region: 'center',
        layout: {
            type: 'hbox',
            align: 'stretch',
            padding: 5
        },
        //renderTo: 'panel',
        defaults: { flex: 1 }, //auto stretch
        items: [
            firstGrid,
            secondGrid
        ],
        dockedItems: {
            xtype: 'toolbar',
            dock: 'bottom',
            items: ['->', // Fill
            {
                iconCls: 'icon-save',
                text: '保存',
                handler: function() {
                    //refresh source grid
                    firstGridStore.save();
                    this.up('window').hide();
                }
            }]
        }
    });
//    var view=Ext.create('Ext.Viewport', {
//        layout: {
//            type: 'border',
//            padding: 5
//        },
//        defaults: {
//            split: true
//        },
//        items: [displayPanel]
//        });
        win = Ext.widget('window', {
            title: '用户所属组',
            closeAction: 'hide',
            width: 610,
            height: 400,
            minHeight: 400,
            layout: 'fit',
            resizable: false,
            modal: true,
            items: [displayPanel]
        });
    win.show();
    var params = { params: { userid: id} };
    //firstGridStore.removeAll();
    firstGridStore.load(params);
    //secondGridStore.removeAll();
    secondGridStore.load(params);
}